<template>
    <div class="box" ref="box"></div>
  </template>
  
  <script>
  // 引入three.js
  import * as THREE from "three";
  // 导入轨道控制器
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  
  export default {
    name: "ThreeJs",
    methods: {
      getThreeJs() {
        // 创建场景
        const scene = new THREE.Scene();
  
        // 创建相机
        const camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
        );
        camera.position.set(50, 50, 50); // 设置相机位置
        camera.lookAt(0, 0, 0); // 设置相机看向原点
  
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        const box = this.$refs.box; // 获取元素
        box.appendChild(renderer.domElement); // 将渲染结果添加到目标元素
  
        // 设置背景色模拟宇宙
        scene.background = new THREE.Color(0x000022); // 深蓝色背景
  

  
        // 添加轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        controls.enableZoom = true; // 启用鼠标滚轮缩放
  
        // 创建太阳
        const sunGeometry = new THREE.SphereGeometry(5, 32, 32);
        const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xFFFF00 });
        const sun = new THREE.Mesh(sunGeometry, sunMaterial);
        scene.add(sun);
  
        // 创建点光源模拟太阳光
        const light = new THREE.PointLight(0xFFFFFF, 1, 200); // 白色点光源
        light.position.set(0, 0, 0); // 设置光源位置与太阳一致
        scene.add(light);
  
        // 行星数据
        const planetsData = [
        { name: 'Mercury', radius: 7, size: 1, color: 0xaaaaaa, speed: 0.15 * 10 }, // 水星
        { name: 'Venus', radius: 12, size: 2, color: 0xdaa520, speed: 0.12 * 10 }, // 金星
        { name: 'Earth', radius: 18, size: 3, color: 0x0000ff, speed: 0.08 * 10 },  // 地球
        { name: 'Mars', radius: 25, size: 2.5, color: 0xff0000, speed: 0.06 * 10 },  // 火星
        { name: 'Jupiter', radius: 40, size: 5, color: 0xffd700, speed: 0.04 * 10 }, // 木星
        { name: 'Saturn', radius: 55, size: 4.5, color: 0x9e7f44, speed: 0.03 * 10 }, // 土星
        { name: 'Uranus', radius: 70, size: 4, color: 0x00ffff, speed: 0.02 * 10 }, // 天王星
        { name: 'Neptune', radius: 85, size: 4, color: 0x000080, speed: 0.01 * 10 }, // 海王星
        ];


        // 创建行星并将它们添加到场景中
        let planets = [];
        let orbits = []; // 存储行星轨道
  
        planetsData.forEach(data => {
          const geometry = new THREE.SphereGeometry(data.size, 32, 32);
          const material = new THREE.MeshBasicMaterial({ color: data.color });
          const planet = new THREE.Mesh(geometry, material);
          planet.userData = data; // 将行星数据保存到 userData 中
          scene.add(planet);
          planets.push(planet);
  
          // 创建并添加行星轨道
          const orbitGeometry = new THREE.RingGeometry(data.radius - 0.2, data.radius + 0.2, 100); // 环形轨道
          const orbitMaterial = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            side: THREE.DoubleSide, // 确保环形轨道两面都可见
            opacity: 0.5,
            transparent: true
          });
          const orbit = new THREE.Mesh(orbitGeometry, orbitMaterial);
          orbit.rotation.x = Math.PI / 2; // 使轨道平行于x-z平面
          scene.add(orbit);
          orbits.push(orbit);
        });
  
        // 声明渲染函数
        function animate() {
          // 让太阳旋转
          sun.rotation.y += 0.01;
  
          // 更新每个行星的位置
          planets.forEach((planet, index) => {
            const data = planet.userData;
            // 计算行星的位置（公转轨迹）
            planet.position.x = data.radius * Math.cos(Date.now() * data.speed * 0.001);
            planet.position.z = data.radius * Math.sin(Date.now() * data.speed * 0.001);
  
            // 行星自转
            planet.rotation.y += 0.01;
  
            // 更新轨道位置
            orbits[index].rotation.z = Date.now() * data.speed * 0.001;
          });
  
          controls.update(); // 更新控制器
          requestAnimationFrame(animate);
          renderer.render(scene, camera);
        }
  
        animate();
  
        // 监听窗口变化
        window.addEventListener("resize", () => {
          // 重置渲染器宽高比
          renderer.setSize(window.innerWidth, window.innerHeight);
          // 重置相机宽高比
          camera.aspect = window.innerWidth / window.innerHeight;
          // 更新相机的投影矩阵
          camera.updateProjectionMatrix();
        });
      },
    },
    mounted() {
      this.getThreeJs(); // 执行three的相关代码
    },
  };
  </script>
  
  <style scoped>
  .box {
    width: 100%;
    height: 100%;
  }
  </style>
  